:root {
  --transit_ms: 1ms;
  --easing_type: ease-in;
  --beizer: cubic-bezier(1.25, 1.25, 1, 1);
}

@font-face {
  font-family: 'katyou';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/katyou.ttf') format('truetype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'migikataagari';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/migikataagari.ttf') format('truetype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Antro';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/Antro_Vectra.otf') format('opentype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MOBO-Regular';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/MOBO-Regular.otf') format('opentype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MOBO-SemiBold';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/MOBO-SemiBold.otf') format('opentype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NoiseWarning';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/NoiseWarning-ϗ.ttf') format('truetype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MOBO-Bold';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/MOBO-Bold.otf') format('opentype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Anurati';
  /* 1. 任意のフォント名を指定 */
  src: url('./fonts/Anurati-Regular.otf') format('opentype');
  /* 2. ファイルのパスと形式 */
  font-weight: normal;
  font-style: normal;
}


nav ul {
  position: relative;
  bottom: 30px;
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
}

nav ul li {
  font-family: 'Anurati';
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 7px;
  margin-right: 7px;
  font-size: 135%;
  cursor: pointer;
}

li span.after {
  color: #000000;
  font-size: 0%;
  transition: 0.3s;
  position: relative;
  bottom: 0px;
}

li:hover span.after {
  font-size: 100%;
  position: relative;
  bottom: 27px;
}

li span.before {
  color: #000000;
  font-size: 100%;
  transition: 0.3s;
  position: relative;
  bottom: 0px;
}

li:hover span.before {
  font-size: 0;
  position: relative;
  bottom: 25px;
}

div.picture img {
  position: relative;
  right: 0;
  width: 3.5%;
  border-radius: 100%;
  margin-left: 3%;
}

div.picture span {
  font-family: 'Antro';
  position: relative;
  bottom: auto;
  margin-right: 30%;
  font-size: 150%;
}

div.pageBody {
  margin-left: 10%;
  background-color: #ffffff;
}

div.pageBody span.pageHeader {
  background-color: #ffffff;
  transition: 0.1s;
  font-family: 'Antro';
  font-size: 120%;
}

div.pageBody span.section {
  margin-right: 20px;
}

h2 span.siteTitle {
  font-family: 'katyou';
  font-size: 200%;
}

div.MainBody {
  text-align: center;
  margin-right: 10%;
}

.aboutSite {
  font-family: 'katyou';
}

span.aboutSite {
  font-family: 'Antro';
  font-size: 200%;
}

.Credits {
  margin-top: 10%;
  text-align: center;
  font-family: 'Anurati', 'MOBO-SemiBold';

  & h1 {
    font-size: 120%;
  }

  & p {
    font-family: 'MOBO-SemiBold';
    position: relative;
    bottom: 30%;
    font-size: 60%;
  }

  & hr {
    margin-right: 20%;
    margin-left: 20%;
  }
}

.credits {
  font-size: 230%;
}

div.Home {
  font-size: 100%;
  display: block;
  transition: var(--transit_ms) var(--easing_type) var(--beizer);
}

div.About {
  font-size: 0%;
  display: block;
  transition: var(--transit_ms) var(--easing_type) var(--beizer);
}

div.Blog {
  font-size: 0%;
  display: block;
  transition: var(--transit_ms) var(--easing_type) var(--beizer);
}

div.Contact {
  font-size: 0%;
  display: block;
  transition: var(--transit_ms) var(--easing_type) var(--beizer);
}

div.Works {
  font-size: 0%;
  display: block;
  transition: var(--transit_ms) var(--easing_type) var(--beizer);
}

a.contact {
  text-decoration: none;
  color: #aa00ff;
  transition: 0.23s;
}

a.contact:hover {
  color: #ffaa00; /* ホバー時に幅100%まで伸びる */
}